<template>
  <div class="targetCompent-container">
    <div class="titleHeader">目标人群</div>
    <div class="targetContainer">
      <div class="targetContainerSet geographic-area"
           style="border-bottom: 1px solid #E0E8EF;padding-bottom: 10px;">
        <div class="setAttributes">
          地理区域:
        </div>
        <div class="targetContainerSet-container">
          <div class="targetContainer-item"
               v-for="(item,index) in prodTargetPopulation.targetPopulationVegion"
               :key="index">
            <div class="target-item target-name">{{item.vegion}}:</div>
            <div class="target-value-container">
              <div class="target-item target-value"
                   v-for="(itSet,indx) in item.province"
                   :key="indx">{{itSet}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="targetContainerSet social-attributes"
           style="padding-top: 10px;">
        <div class="setAttributes">
          社会属性：
        </div>
        <div class="targetContainerSet-container">
          <div class="targetContainer-item">
            <div class="target-item target-name">年龄:</div>
            <div class="target-item target-value">{{prodTargetPopulation.age}}岁</div>
          </div>
          <div class="targetContainer-item">
            <div class="target-item target-name">收入:</div>
            <div class="target-item target-value">{{prodTargetPopulation.income}}</div>
          </div>
          <div class="targetContainer-item">
            <div class="target-item target-name">性别:</div>
            <div class="target-item target-value">{{prodTargetPopulation.sex}}</div>
          </div>
          <div class="targetContainer-item">
            <div class="target-item target-name">教育程度:</div>
            <div class="target-item target-value">{{prodTargetPopulation.education}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "target-compent",
  data () {
    return {
      target: '0'
    }
  },
  computed: {
    ...mapGetters(["prodTargetPopulation"])
  },
  mounted () {
  }
}
</script>

<style scoped>
.targetCompent-container {
  display: flex;
  flex-direction: column;
}
.targetContainer {
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.targetContainerSet,
.targetContainer-item,
.targetContainerSet-container {
  display: flex;
}
.targetContainerSet {
  flex-direction: column;
}
.setAttributes {
  height: 30px;
  display: flex;
  align-items: center;
}
.targetContainerSet-container {
  width: 100%;
}
.geographic-area .targetContainerSet-container {
  flex-direction: column;
}
.social-attributes .targetContainerSet-container {
  justify-content: space-between;
}
.targetContainer-item {
  height: 28px;
  align-items: center;
}
.target-name {
  margin-right: 8px;
}
.target-value-container {
  display: flex;
  flex: 1;
}
.target-value-container .target-value {
  margin-right: 20px;
}
.titleHeader {
  font-weight: bold;
}
</style>
